<template>
  <div>
    <el-menu
      default-active="admin/hello"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#197cfe"
      text-color="#fff"
      active-text-color="#fff"
      unique-opened
      router
    >
      <el-menu-item index="/admin/hello"
        ><i class="el-icon-s-home"></i>首页</el-menu-item
      >
      <!-- 动态渲染二级菜单,menu菜单权限!!! -->
      <el-submenu v-for="item in menu" :index="item.path" :key="item.id">
        <template slot="title"
          ><i :class="item.icon"></i>{{ item.name }}</template
        >
        <el-menu-item-group
          v-for="it in item.children"
          :index="it.path"
          :key="it.id"
        >
          <el-menu-item @click="menuClick" :index="it.path">{{ it.name }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  methods: {
    menuClick(e) {
      window.sessionStorage.setItem("key", e.$el.innerText);
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
  computed: {
    ...mapGetters(["menu"]),
  },
};
</script>

<style lang="scss" scoped>
  @import "./scss/index.scss";
</style>